<template>
	<div class="top-wrap-parent">
		<div class="top-wrap">
		<Banner></Banner>
			<div class="home-video-wrap">
				<!-- 正在直播 -->
				<div class="h-ing h-card" v-if="startRoomList.length>0">
					<div class="h-t-title">
						<div class="h-t-info">正在播出</div>
					</div>
					<ul class="h-ing-list">
						<li v-for="(item, index) in startRoomList" :key="index" class="border-top-1px">
							<div class="list-wrap" @click="goToLive(item.roomId)">
								<img :src="item.imagUrl" @click.self.prevent>
								<div class="list-wrap-tips">正在播出</div>
								<div class="list-wrap-orgName">{{item.userAnchor.nickname}}</div>
							</div>
							<div class="list-fot h-ing-foot">
								<div class="h-ing-foot-title">{{item.title}}</div>
								<div class="list-fot-people">
									<img :src="roomImg.people">
									<div>{{item.roomMember}}</div>
								</div>
							</div>
						</li>
					</ul>
				</div>

				<!-- 直播预告 -->
				<div class="h-trailer h-card" v-if="forecastRoomList.length>0">
					<div class="h-t-title">
						<div class="h-t-info">直播预告</div>
					</div>
					<ul class="h-ing-list">
						<li v-for="(item, index) in forecastRoomList" :key="index" class="border-top-1px">
							<div class="list-wrap" @click="goToLive(item.roomId)">
								<img :src="item.imagUrl + '?x-oss-process=image/resize,m_fixed,h_380,w_690'" @click.self.prevent>
								<div class="list-wrap-tips">直播预告</div>
								<div class="list-wrap-orgName">{{item.userAnchor.nickname}}</div>
							</div>
							<div class="list-fot">
								<div class="list-fot-title">{{item.title}}</div>
								<div class="h-trailer-time">
									<Iconfont iconClass="shijian" />
									<div>
										直播时间
										<span>{{item.beginTime}}</span>
									</div>
								</div>
							</div>
						</li>
					</ul>
				</div>
				<!--  我的收藏-->
				<div class="h-great h-card" v-if="shouCangList.length > 0">
					<div class="h-t-title h-t-more">
						<div class="h-t-info">
							<div>我的收藏</div>
							<div class="more" @click="goToShouCangMore" v-if="shouCangList.length > 5">更多
								<Iconfont iconClass="iconfont iconyoujiantou1" />
							</div>
						</div>
					</div>
					<div class="mine-collect">
						<ul>
							<li v-for="v of shouCangList">
								<img :src="v.imagUrl" @click="clickCollectImg(v.vid)" />
								<p>{{v.title}}</p>
							</li>
						</ul>
					</div>
				</div>
				<GreatVideo></GreatVideo>
			</div>

		</div>
    <AnimationActivity  v-if = 'isAniActivity'  :offAnimationNum = 'offAnimationNum'   :animationActivityData = 'animationActivityData'  :activityHomeIcon = 'activityHomeIcon'/>
    <!-- 全局背景层组件 -->
    <GlobalMask @formChildMsg='formChildData' v-if="isGlobalMask" />
	</div>

</template>

<script>
	import Banner from "../pages/Banner";
	import wxApi from "../util/wxApi";
	import GreatVideo from './homeCom/greatVideo'//首页精彩视频组件
   import AnimationActivity from '@/components/animationActivity.vue'; //活动动画组件
    import GlobalMask from '@/components/globalMask'; //全局背景层组件
	export default {
		components: {
		Banner,
			GreatVideo,
      AnimationActivity,
       GlobalMask,//全局背景层组件
		},
		mixins: [wxApi],
		data() {
			return {
				forecastRoomList: [],
				startRoomList: [],
				backToSeeArr: [],
				shouCangList: [],
				roomImg: {
					pv: require("../assets/images/pv.jpg"),
					people: require("../assets/images/people.jpg")
				},
				tabsParam: [{
						value: '最新视频',
						type: ''
					},
					{
						value: '最热视频',
						type: 'pv'
					}
				],
				nowIndex: 0,
				shareInfoData: '', //分享信息
        isAniActivity:false,//首页活动组件
        animationActivityData:[],
        offAnimationNum:0,
			};
		},
		created: function() {
			this.getRoomList();
			this.dotNum();
			//this.getBackToSeeArr('');
			this.$store.dispatch("showNav");
			this.getShouCangList();
			window.sessionStorage.setItem(this.$channel + "_mineCollectNum", 1);
			this.getWXInfo(); //分享信息
      this.getHomeActivityIcon()
		},
		mounted: function() {},
		destroyed: function() {
			//this.$store.dispatch("hideNav");
		},
		methods: {
      getHomeActivityIcon(){//获取首页活动配置图标
         this.$http.get("/h5live/hzb/activity/topIcon")
           .then(res => {
             if (res.data.code == "000000") {//type  0 默认 1 自定义
                if(res.data.data && res.data.data.type =='1'){
                   this.activityHomeIcon = res.data.data.iconUrl
                }
                fun.getActivityData(0,0,(res)=>{// 0  首页  0  首页id
                   //console.log(res.data.data[3])
                   if(res.data.data[3].length){
                      this.animationActivityData = res.data.data[3];
                      this.isAniActivity = true;
                   }
                })
             }
           })
           .catch(response => {
             console.log(response);
           });
      },
      formChildData(data){
        switch (data.type){
          case 'closeAllPopup':
            this.offAnimationNum++;
            this.$store.dispatch("globalMask", {isShow:false,bgColor:''});
            break;
          default:
            break;
        }
      },
			//分享信息
			getWXInfo() {
				this.$http.get("/h5live/getOrgShare")
					.then(res => {
						//console.log(res.data.data)
						if(res.data.code == "000000") {
							//console.log(res.data.data)
							this.shareInfoData = res.data.data;
						}
					})
					.catch(response => {
						console.log(response);
					});
			},
			dotNum() { //统计
				let _this = this;
				var argumentData = {
					sessionId: "home_page", //场次id
					streamType: 12, //视频类型：1-预告 2-直播 3-回看 10-全局统计 11-商品点击 12-页面
					actionValue: 1, //行为：1-进入 2-离开 3-点击播放 4-留言 5-点赞 6-关注 7-分享 8-开播 9-关播 10-最高峰值
					playSource: fun.getPlatform(), //微信 app
					url: window.location.href, //当前的url
				};
				_this.$http.post("/h5live/recordData", argumentData, {
						headers: {
							"Content-Type": "application/json"
						}
					})
					.then(
						res => {
							//console.log(res)
						},
						err => {
							console.log(err);
						}
					);
			},
			//点击收藏列表
			clickCollectImg(vid) {
				//http://localhost:8080/#/gd/lookBack_particulars/329
				this.$router.push(`/${this.$channel}/lookBack_particulars/${vid}`);
			},
			//获取收藏列表
			getShouCangList() {
				this.$http.post("/h5live/getScList?p=1")
					.then(res => {
						if(res.data.code == "000000") {
							//console.log(res.data.data)
							this.shouCangList = res.data.data
						}
					})
					.catch(response => {
						console.log(response);
					});
			},
			//获取直播间列表
			getRoomList() {
				this.$http
					.get(`/h5live/getRoomList?plat=${fun.getPlatform()}`)
					.then(res => {
						if(res.data.code == "000000") {
							this.forecastRoomList = res.data.data.forecastRoomList;
							this.startRoomList = res.data.data.startRoomList;
							//this.forecastRoomList = [];
							//this.startRoomList = [];
						} else {}
					})
					.catch(response => {
						console.log(response);
					});
			},
			//获取精彩视频列表
			getBackToSeeArr(sel) {//舍弃
				this.$http.get("/h5live/getHomeVideoTop", {
					params: {
						sel: sel,
					}
				}).then(
					res => {
						//console.log(res); //小视频数组
						if(res.data.code == "000000") {
              //this.backToSeeArr = res.data.data;
              res.data.data && (this.backToSeeArr = res.data.data);
							//console.log(this.backToSeeArr);
						} else {}
					},
					err => {
						console.log(err);
					}
				);
			},
			goToLive(roomId) {
				// this.$router.push(`/${this.$channel}/liveList/live`)
             this.$router.push(`/${this.$channel}/liveRoom/${roomId}?dzhPage=true`);
			},
			goToLiveMore() {
				this.$router.push({
					path: `/${this.$channel}/liveMore`,
					query: {
						tabNum: this.nowIndex
					}
				});
			},
			goToShouCangMore() {
				this.$router.push(`/${this.$channel}/mineCollect`);
			},
			wxRegCallback() {
				let opstion = {
					link: window.location.origin + '/#' + this.$route.path,
					title: this.shareInfoData.shareTitle || '【' + this.$store.state.SysOrgInfo.name + '】一起来看直播吧！', // 分享标题
					desc: this.shareInfoData.shareDesc || "精彩直播，尽在" + this.$store.state.SysOrgInfo.name + "手机直播！", //分享描述
					imgUrl: this.shareInfoData.shareIcon || this.$store.state.SysOrgInfo.icon,
					success: function() {
						//alert("分享成功");
					},
					error: function(e) {
						//alert('分享失败:'+JSON.stringify(e))
					}
				};
				this.ShareTimeline(opstion);
			},
			//精彩视频切换
			toggleTabs: function(index, type) {//舍弃
				this.nowIndex = index;
				this.getBackToSeeArr(type)
				//console.log(index)
			},
		},
		computed: {
			isLoadIcon() {
				if(this.$store.state.SysOrgInfo.icon && this.shareInfoData != '') {
					this.wxRegister(this.wxRegCallback);
					return true
				} else {
					return false
				}
			},
      isGlobalMask() { //操作面板外层透明蒙版 显示
           return this.$store.state.globalMask.isShow
      },
		},
		watch: {
			isLoadIcon(val, oldVal) {}
		}
	};
</script>
<style scoped="scoped">
	.videoMore {
		font-weight: normal;
		font-size: 0.875rem;
		color: #999999;
		float: right;
		margin: -50px 30px 0 0;
	}

	.videoMore i {
		color: #999999;
		font-size: 0.75rem;
		vertical-align: bottom;
		margin-left: 0.15625rem;
	}

	.videoMoreJS {
		font-weight: normal;
		font-size: 0.875rem;
		color: #999999;
		float: right;
	}

	.videoMoreJS i {
		color: #999999;
		font-size: 0.75rem;
		vertical-align: bottom;
		margin-left: 0.15625rem;
	}

	.h-great-tab {
		width: 500px;
		display: inline-block;
	}

	.mine-collect ul {
		margin-left: 20px;
		display: flex;
		overflow: scroll;
		-webkit-overflow-scrolling: touch;
		margin-top: 15px;
	}

	.mine-collect ul li {
		width: 220px;
		height: 200px;
		float: left;
		margin-right: 15px;
	}

	.mine-collect ul li img {
		width: 220px;
		height: 140px;
		border-radius: 10px;
	}

	.mine-collect ul li p {
		width: 200px;
		margin-top: 10px;
		margin-left: 20px;
		color: #0C0C0C;
		font-size: 28px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.info-num {
		font-size: 20px;
	}

	.h-ing-list {
		padding: 0 30px;
	}

	.h-ing-list>li {
		margin-top: 30px;
	}

	.h-ing-list li+li {
		padding-top: 30px;
		margin-top: 30px;
	}

	.h-ing-list li:last-child {
		padding-bottom: 30px;
	}

	.h-ing-foot {
		display: flex;
		display: -webkit-flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 20px;
	}

	.h-ing-foot-title {
		font-size: 32px;
		color: #0C0C0C;
	}

	.list-wrap {
		width: 100%;
		height: 380px;
		position: relative;
		border-radius: 5px;
	}

	.list-wrap img {
		width: 100%;
		height: 380px;
		border-radius: 5px;
	}

	.list-wrap-tips {
		width: 130px;
		height: 48px;
		line-height: 48px;
		font-size: 26px;
		text-align: center;
		color: #fff;
		position: absolute;
		top: 10px;
		right: 10px;
		border-radius: 5px;
	}

	.list-wrap-orgName {
		height: 48px;
		line-height: 48px;
		font-size: 26px;
		color: #fff;
		position: absolute;
		bottom: 0;
		width: 100%;
		text-indent: 30px;
		background: -webkit-linear-gradient(180deg, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0.8));
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0.8));
		/* background:linear-gradient(180deg,rgba(255,255,255,0.8),rgba(0,0,0,0.8)); */
		border-radius: 0px 0px 5px 5px;
	}

	.list-fot-title {
		font-size: 32px;
		color: #0C0C0C;
		margin-bottom: 20px;
		margin-top: 20px;
	}

	.list-fot-people {
		display: flex;
		align-items: center;
	}

	.list-fot-people img {
		width: 26px;
		height: 26px;
	}

	.list-fot-people div {
		color: #F35757;
		font-size: 28px;
		width: 95px;
		text-align: center;
		margin-left: 10px;
	}

	.h-trailer-time {
		display: flex;
		align-items: center;
	}

	.h-trailer-time div {
		margin-left: 15px;
		line-height: 28px;
		font-size: 24px;
		color: #696969;
	}

	.h-trailer-time div span {
		margin-left: 10px;
	}

	.h-trailer-time i {
		font-size: 26px;
		color: #939393;
	}

	.h-ing .list-wrap-tips {
		background: linear-gradient(0deg, rgba(204, 45, 48, 1), rgba(247, 127, 108, 1));
	}

	.h-trailer .list-wrap-tips {
		background: #539e8a;
	}

	.h-t-title {
		align-items: center;
		width: 670px;
		margin-left: 50px;
		position: relative;
	}

	.h-t-info {
		font-size: 36px;
		color: #181818;
		font-weight: bold;
		padding-left: 26px;
		display: flex;
		flex: 1;
		justify-content: space-between;
		position: relative;
		height: 44px;
		vertical-align: middle;
		line-height: 50px;
	}

	.h-t-info::after {
		content: "";
		display: block;
		position: absolute;
		transform-origin: 0 0;
		width: 5px;
		top: 0;
		left: 0;
		height: 44px;
		transform-origin: left 0;
		background: red;
		background: #539e8a;
		border-radius: 3px;
	}

	.h-t-info>div {
		font-weight: bold;
		vertical-align: middle;
		line-height: 50px;
	}

	.h-t-info .more {
		font-weight: normal;
		font-size: 28px;
		color: #999999;
	}

	.h-t-info .more i {
		color: #999999;
		font-size: 24px;
		vertical-align: bottom;
		margin-left: 5px;
	}
	/* 精彩视频 */

	.h-great {
		width: 100%;
	}

	.top-wrap-parent {
		width: 100vw;
		height: calc(100vh - 96px);
		overflow: scroll;
	}

	.top-wrap {
		width: 100vw;
		min-height: calc(100vh - 96px);
	}

	.home-video-wrap {
		background: #f4f4f4;
	}

	.list-fot {
		padding-left: 30px;
	}

	.pageNodes {
		width: 100%;
		height: 60px;
		line-height: 60px;
		text-align: center;
		font-size: 28px;
		color: #C4C4C4;
		background: rgb(244, 244, 244)
	}

	.h-card {
		background: #fff;
		box-shadow: 0px 2px 5px 0px rgba(155, 155, 155, 0.05);
		padding-top: 20px;
	}

	.h-trailer,
	.h-ing {
		margin-bottom: 10px;
	}

	.h-t-title.h-t-more {
		width: 670px;
	}

	.icon-youjiantou1 {
		color: #c5c5c5 !important;
	}

	.h-great-tab {
		display: flex;
	}

	.h-great-tab {
		display: flex;
		padding: 0 50px;
	}

	.h-g-tab-item {
		position: relative;
		font-size: 28px;
		color: rgba(51, 51, 51, 1);
		padding: 0px 30px 25px 30px;
		margin-top: 45px;
	}

	.h-g-tab-item.active::after {
		content: '';
		width: 36px;
		height: 4px;
		position: absolute;
		top: 46px;
		left: 50%;
		transform: translateX(-50%);
		background: #FF3B30;
	}

	.active {
		color: #F35757;
	}

	.gs-box {
		width: 750px;
		height: 88px;
	}

	.gs-box p {
		color: #647381;
		font-size: 32px;
		text-align: center;
		line-height: 88px;
	}

	.gs-box .back {
		width: 22px;
		height: 22px;
		position: absolute;
		top: 30px;
		left: 30px;
		transform: rotate(45deg);
		border-bottom: 2px solid #647381;
		border-left: 2px solid #647381;
	}
</style>
